<template>
    <div>
        <!--树结构-->
        <Tree :data="tree" @on-select-change="changeTree" style="position:absolute;top:0;left:0;"></Tree>
        <!--右边的表格-->
        <div style="position:absolute;top:10px;left:100px;margin-left:50px;width:85%;">
            <Button style="margin:0 10px 10px 0" type="primary" @click="modalAdd = true">添加</Button>
            <Button style="margin:0 10px 10px 0" type="error" @click="removes">删除多个</Button>
            <!--搜索框-->
            <Input v-model="filter.title">
                <Button slot="append" icon="ios-search" @click="searchData"></Button>
            </Input>
            <!--表格-->
            <Table ref="selection" @on-selection-change="onSelectionChangeHandler" border :columns="columns" :data="data"></Table>
            <!--分页-->
            <Page :total="total" :page-size="filter.rows" :page-size-opts="[2,4,6,8,10]" @on-page-size-change="onPageSizeChangeHandler" @on-change="onChangeHandler" show-sizer></Page>
            <!--添加修改信息的弹框-->
            <Modal
                v-model="modalAdd"
                title="添加信息框"
                >
                <!--在弹出框里面再加一个表单，用于添加信息的书写-->
                <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                    <FormItem label="产品名称" prop="title">
                        <Input v-model="formValidate.title"/></Input>
                    </FormItem>
                    <FormItem label="产品内容" prop="desc">
                        <Input v-model="formValidate.desc"/></Input>
                    </FormItem>
                </Form>
                <div slot="footer">
                    <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                    <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                </div>
            </Modal>
        </div>
    </div>
</template>
<script>
import { base } from "../common/base";
export default {
    mixins: [base],
    data() {
        return {
            modules: "product",
            type: 2,
            formValidate: {
              title: "",
              desc: ""
            },
            ruleValidate: {
              title: [{ required: true, message: "产品名不能为空", trigger: "blur" }],
              desc: [{ required: true, message: "产品内容不能为空", trigger: "blur" }]
            },
            columns: [
              {
                //单选框
                type: "selection",
                width: 60,
                align: "center"
              },
              {
                //用户模块中的用户姓名
                title: "产品名称",
                key: "title"
              },
              {
                //用户模块中的用户密码
                title: "产品内容",
                key: "desc"
              },
              {
                //用户模块中的操作（修改和删除）
                title: "操作",
                key: "action",
                width: 150,
                align: "center",
                render: (h, params) => {
                  return h("div", [
                    h(
                      "Button",
                      {
                        props: {
                          type: "primary",
                          size: "small"
                        },
                        style: {
                          marginRight: "5px"
                        },
                        on: {
                          click: () => {
                            this.editData(params.row._id);
                          }
                        }
                      },
                      "修改"
                    ),
                    h(
                      "Button",
                      {
                        props: {
                          type: "error",
                          size: "small"
                        },
                        on: {
                          click: () => {
                            this.remove(params.row._id); //这里的params.row._id就是当前点击的用户信息的id
                          }
                        }
                      },
                      "删除"
                    )
                  ]);
                }
              }
            ]
        };
    }
};
</script>
